<style scoped lang="scss">
.redeem {
    width: 3.4rem;
    height: .4rem;
    margin-left: .17rem;
    border-radius: .5rem;
}

.Redeem1 {
    background: #000;
    width: 100%;
    height: 5rem;
}
</style>
<template>
    <div class="Redeem1">
        <van-nav-bar title="兑换优惠券" left-text="返回" left-arrow @click-left="onClickLeft" />
        <van-coupon-cell :coupons="coupons" :chosen-coupon="chosenCoupon" @click="showList = true" />
        <!-- 优惠券列表 -->
        <van-coupon-list :coupons="coupons" :chosen-coupon="chosenCoupon" :disabled-coupons="disabledCoupons"
            @change="onChange" @exchange="onExchange" />
        <van-button type="primary" block class="redeem" @click="useRedeem(coupons)">使用</van-button>
    </div>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import { useCounterStore } from '../pinia';
import { useRouter } from 'vue-router';
import { showDialog } from 'vant';
const router = useRouter();
const store = useCounterStore();
// 定义一个优惠券对象
const coupon = {
    available: 1,
    condition: '仅限专家问诊用无门槛,100元',
    content: '满150元可用',
    reason: '',
    value: 150,
    name: '新人专家问诊9折',
    startAt: 2489104100,
    endAt: 1514592000,
    valueDesc: '8',
    unitDesc: '元',
};
const coupons = ref([coupon]);
// 定义一个布尔值，用于控制优惠券列表的显示与隐藏
const showList = ref(true);
// 定义一个数字，用于记录当前选中的优惠券索引
const chosenCoupon = ref(-1);
// 定义一个布尔值，用于判断是否有优惠券被选中
const isChosen = ref(false);
// 存储当前选中的优惠券的索引
let idx = ref(0)
// 定义一个方法，用于改变当前选中的优惠券索引
const onChange = (index: number) => {
    // @ts-ignore
    idx = index
    showList.value = false;
    chosenCoupon.value = index;
    isChosen.value = index !== -1; // 当index不为-1时，表示有优惠券被选中
    console.log(isChosen.value, 'isChosen')
};

// 定义一个方法，用于添加优惠券
// @ts-ignore
const onExchange = (code: any) => {
    console.log(code,2222)
    coupons.value.push(coupon);
    
};
// 定义一个方法，用于返回上一页
const onClickLeft = () => history.back();
// 定义一个方法，用于使用优惠券
const useRedeem = (item: any) => {

    if (!isChosen.value) {
        showDialog({ message: '请选择优惠券' });
        return;
    }
    // @ts-ignore
    store.redreemlist.push(item[idx]);
    router.push('/coupon');
    isChosen.value = false; // 使用优惠券后，重置为false
}
</script>
